<template>
  <div class="user-container">
    <div class="custom-contents">
      <div class="head">
        <!-- <div class="hello">HELLO</div>
        <div class="hello-text">欢迎进入哲人石</div> -->
        <div class="openhead" v-if="!ZRSUserInfo">
          <img class="headimg" :src="`./source/img/${sex == 1 ? 'ns_head' : 'nvs_head'}.png`" />
          <div class="user-namse">微信用户</div>
        </div>
        <div class="openhead" v-if="ZRSUserInfo">
          <img class="headimg" :src="ZRSUserInfo.icon" />
          <div class="user-namse">
            <div>ID:{{ ZRSUserInfo.code}}</div>
            <div style="padding-top:6px;">姓名：{{ ZRSUserInfo.realname || ZRSUserInfo.s_name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="cell-group1">
      <div class="cell-box">
        <van-grid :column-num="2" :border="false">
          <van-grid-item icon="photo-o" @click="hrefMethod('yanxi')">
            <div class="cell-grid-num"> {{ ZRSUserInfo.yxcount}}</div>
            <div class="cell-grid-text">研习次数</div>
          </van-grid-item>
          <van-grid-item icon="photo-o" @click="hrefMethod('zuoye')">
            <div class="cell-grid-num">{{ ZRSUserInfo.count2}} </div>
            <div class="cell-grid-text">作业数量</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="cell-group">
      <div class="cell-box">
        <van-cell title="顾问老师" is-link @click="hrefMethod('angel')">
          <template #icon>
            <img style="width: 0.4rem;height: 0.4rem;" :src="tianshi" />
          </template>
        </van-cell>
        <van-cell title="我的订单" is-link @click="hrefMethod('order')">
          <template #icon>
            <img style="width: 0.4rem;height: 0.4rem;" :src="order" />
          </template>
        </van-cell>
        <!-- <van-cell title="我的作业" is-link @click="hrefMethod('zuoye')">
          <template #icon>
            <img style="width: 0.4rem;height: 0.4rem;" :src="zuoye" />
          </template>
        </van-cell> -->
        <van-cell title="个人资料" is-link @click="hrefMethod('memberInfo')">
          <template #icon>
            <img style="width: 0.4rem;height: 0.4rem;" :src="gerenziliao" />
          </template>
        </van-cell>
        <van-cell title="个人办公" is-link @click="hrefMethod('perOffice')" v-if="ZRSUserInfo.canwork==1" >
          <template #icon>
            <img style="width: 0.4rem;height: 0.4rem;" :src="bangong" />
          </template>
        </van-cell>
      </div>
    </div>
    <footers/>
  </div>
</template>

<script>
import { Cell, CellGroup, Image, Grid, GridItem } from 'vant';
import tianshi from "@/assets/img/flay.png";
import order from "@/assets/img/name.png";
import zuoye from "@/assets/img/name.png";
import gerenziliao from "@/assets/img/sign.png";
import bangong from "@/assets/img/book.png";
import { mapState } from 'vuex';
console.log('tianshi', tianshi);
export default {
  components: {
    [Cell.name]: Cell, [CellGroup.name]: CellGroup,
    [Image.name]: Image, [Grid.name]: Grid, [GridItem.name]: GridItem,
  },
  data() {
    return {
      name: '',
      tianshi: tianshi,
      order: order,
      zuoye: zuoye,
      gerenziliao: gerenziliao,
      bangong: bangong,
      sex: 1,
      userInfo: null,
      canwork:0
    };
  },
  computed: {
    ...mapState({
      ZRSUserInfo: state => state.app.ZRSUserInfo
    }),
  },
  mounted() {
  },
  methods: {
    hrefMethod(path) {
      this.$router.push({ path: '/' + path });
    }
  },
};
</script>

<style lang="less">
.user-container {
  background: #fff;
  .custom-contents {
    padding: 0.2rem 0.2rem;
  }
  .head {
    padding: 0.1rem;
    // background: url("../../assets/user_bg.png") center no-repeat;
    // background-size: 100% 100%;
    // border-radius: 8px;
    // box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .hello {
    font-size: 0.28rem;
    color: #888;
    font-weight: bold;
  }

  .hello-text {
    font-size: 0.28rem;
    color: #888;
    font-weight: bold;
    padding-top: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .openhead {
    align-items: center;
    display: flex;
    padding: 0.2rem 0;
  }

  .headimg {
    border-radius: 50%;
    display: block;
    float: left;
    overflow: hidden;
    width: 1.2rem;
    height: 1.2rem;
  }

  .user-namse {
    font-size: 0.32rem;
    color: #888;
    padding-left: 0.1rem;
    white-space: nowrap;
  }

  .cell-group {
    padding: 0.2rem 0.1rem;
  }

  .cell-group1 {
    padding: 0 0.1rem;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
  }
  .van-grid-item__content{
    background: transparent;
  }
  .cell-box {
    // padding: 0.3rem 0;
    // background-color: #ffffff;
    // border-radius: 8px;
    // box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .van-cell__left-icon,
  .van-cell__right-icon {
    height: 0.48rem;
    font-size: 0.3rem;
    line-height: 0.48rem;
  }

  .van-cell__title {
    font-size: 0.32rem;
    padding-left: 0.2rem;
  }

  .van-cell {
    display: flex;
    align-items: center;
    background: transparent;
  }
  .cell-grid-num {
    font-size: 0.34rem;
    color: #333;
    text-align: center;
    font-weight: 600;
  }
  .cell-grid-text {
    font-size: 0.32rem;
    color: #333;
    text-align: center;
    padding-top: 0.1rem;
  }
}
</style>